<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
		 $(function(){
			 //让第二层的ul隐藏
			 $("li>ul").hide();
			 //给第一层的li添加点击事件
			 $("body>ul>li").click(function(){
				//this代表当前点击的li  是js对象
				//.children()  获取元素的所有子元素
				$(this).children().toggle();
				//得到其他li里面的ul,并隐藏
				$(this).siblings().children().hide();
			 });
		 });
</script>
</head>
<body>
<ul>
	<li>工作好友
		<ul>
			<li>马云</li>
			<li>马化腾</li>
			<li>王健林</li>
		</ul>
	</li>
	<li>亲朋好友
		<ul>
			<li>习大大</li>
			<li>李克强</li>
			<li>栗战书</li>
		</ul>
	</li>
	<li>前女友们
		<ul>
			<li>范冰冰</li>
			<li>Angelababy</li>
			<li>赵丽颖</li>
		</ul>
	</li>
</ul>
</body>
</html>